{% assign global = theme_config.global %}
{% if section.settings.collection_id.id %}
{% get_collection collections_id={ section.settings.collection_id.id } %}
{% assign collection = collection  %}
{% endif %}

{% stylesheet %}


.block_collection_waterfall .block_collection_product ul {
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(4, calc(25% - 22.5px));
}

.block_collection_waterfall .block_collection_product li {
    list-style-type: none;
    line-height: 1.4;
    text-align: center;
}

.block_collection_waterfall .block_collection_product .product_pic {
    margin-bottom: 18px;

    position: relative;
}

.block_collection_waterfall .block_collection_product .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.block_collection_waterfall .block_collection_product .product_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block_collection_waterfall .block_collection_product .block_product_name {
    margin-bottom: 4px;
    line-height: 1.5;
}
.block_collection_waterfall .block_collection_product .product_price {
    font-weight: bold;
}

.block_collection_waterfall .block_collection_product .product_oldprice {
    color: #888;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
    font-weight: normal;
}

.block_collection_waterfall {
    margin: 0 auto;
    gap: 30px;
}

.block_collection_waterfall.waterfall-fill {
    width: 100%;
    max-width: 100% !important;
}

.block_collection_waterfall .fall-item img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.block_collection_waterfall .fall-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.block_collection_waterfall .fall-item .block_product_name{
    margin-bottom: 10px;
    line-height: 1.5;
}

.block_collection_waterfall .fall-item .fall-item-number {
    font-size: 14px;
    font-weight: 400;
    margin-top: 10px;
    color:  var(--main_color);
}
.block_collection_waterfall .fall-item .product_price{
    text-align: center;
}
@media (max-width: 767px) {
  .mo-waterfall-warp .mo-waterfall-column {
    grid-row-gap:30px;
  }
}

{% comment %} @media screen and (max-width: 767px) {
    .block_collection_waterfall .discount_tag.label_style_1,
    .block_collection_waterfall .discount_tag.label_style_2,
    .block_collection_waterfall .discount_tag.label_style_3,
    .block_collection_waterfall .discount_tag.label_style_4{
        transform: scale(0.8) translate(20%,-20%);
    }
} {% endcomment %}
{% endstylesheet %}

<div id="block_collection_waterfall-{{ block_id | default : section.block_id  }}" class="container_wrapper block_collection_waterfall {% if section.settings.is_fill %}full_container_wrapper{% endif %}">
    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
        {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
    </div>
    {% endif %}
    <div class="mo-waterfall-warp block_collection_product {% if section.settings.is_mobile_name %}show-mobile_name{% endif %}" id='block_product_waterfall-{{ block_id | default : section.block_id  }}'>
    </div>
</div>

{% raw %}
<script type="text/x-template" id="omesaas-collection-product-temp">
  {% if theme_config.global.product_size == "1" %}
  {% assign product_size = "11" %}
  {% elsif theme_config.global.product_size == "2" %}
  {% assign product_size = "43" %}
  {% elsif theme_config.global.product_size == "3" %}
  {% assign product_size = "23" %}
  {% endif %}
  {% for product in products %}
  <li class="block_collection_product">
      <div class="product_pic {% if theme_config.global.product_move_two %}{% if product.images[1].src %}product_img_hover{% endif %}{% endif %}">
        {% capture product_handle %}/products/{{ product.handle }}?data_from={{data_from}}{% endcapture %}
        {% if collection_handle %}
            {% capture path %}/collections/{{collection_handle}}{% endcapture %}
            {% assign product_handle =  product_handle | prepend : path %}
        {% endif %}
          <a class="product_img" data-scale="{{ product_size }}" href="{{product_handle}}">
              <img class="default_img" data-src="{{ product.src }}" alt="{{product.image.alt | default : product.title }}" src="/theme/default/assets/empty.png">
              {% if theme_config.global.product_move_two %}
              {% if product.images[1].src %}
              <img class="hover_img"  data-src="{{ product.images[1].src }}" alt="{{product.images[1].alt | default : product.title }}" src="/theme/default/assets/empty.png">
              {% endif %}
              {% endif %}
          </a>
          {% if product.inventory_tracking > 0 and product.inventory_policy == 1 %}
          {% if product.inventory_quantity == 0 %}
              <div class="soldout">{{ lang.general.sold_out }}</div>
          {% endif %}
          {% endif %}
  
          {% if theme_config.global.product_discount_label and product.variant.price %} 
          {% if product.variant.price < product.variant.compare_at_price %}
          {% assign price = product.variant.compare_at_price | minus: product.variant.price | divided_by: product.variant.compare_at_price | times: 100 | floor %}
          {% if price > 0 %}
          <div class="discount_tag {{ theme_config.global.discount_label_style }}"><div class="discount_tag_graphics"></div><div class="discount_tag_name">{{ price }}% <span>OFF</span></div></div>
          {% endif %} 
          {% endif %}
          {% endif %}
          <div class="product_tag_list">
              {% if theme_config.global.product_preview %}
              <a class="product_view" data-handle="{{ product.handle }}" data-from="{{data_from}}" href="javascript:void(0)"><svg t="1645603103455" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1883" width="24" height="24"><path d="M512 608a96 96 0 1 1 0-192 96 96 0 0 1 0 192m0-256c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160-71.776-160-160-160" p-id="1884"></path><path d="M512 800c-212.064 0-384-256-384-288s171.936-288 384-288 384 256 384 288-171.936 288-384 288m0-640C265.248 160 64 443.008 64 512c0 68.992 201.248 352 448 352s448-283.008 448-352c0-68.992-201.248-352-448-352" p-id="1885"></path></svg></a>
              {% endif %}
          </div>
      </div>
      <div class="block_product_name {% unless theme_config.global.product_title_model %}wap_hide{% endunless %}">
          <a class="line-clamp2" {% if theme_config.global.product_title_style == "hide" %}class="hide_line"{% endif %} href="{{product_handle}}">{{ product.title }}</a>
      </div>
      <div class="product_price">
        <span class="general_buying-color">{{ product.variant.price | money }}</span>
        {% if product.variant.compare_at_price != 0 %}
        <span class="product_oldprice general_original-color">{{ product.variant.compare_at_price | money }}</span>
        {% endif %}
      </div>
  </li>
  {% endfor %}
</script>
{% endraw %}

<script type="text/javascript">
(function(){
  const throttleQuickview = moi.throttle(function () {  
      moi.popupProductPicture({
        handle: $(this).data("handle")
      });
  }, 1000);
    const waterfall = new waterfalls({
        id: "#block_product_waterfall-{{ block_id | default : section.block_id  }}",
        bottomDistance: 30,
        scrollBottom: scrollBottom,
        renderType:"liquid",
        renderComplete(node){
            node.find(".product_view").click(throttleQuickview);
            window.addLazyImages && addLazyImages(node.find("img[data-src]"));
        },
        resizeConfig: [{
                min:0,
                max: 767,
                rowGutter: '15px',
                columnsGutter: '15px',
                columns: {{ section.settings.mobile_column }}
            },
            {
                    min: 768,
                    max: 1199,
                    rowGutter: '30px',
                    columnsGutter: '30px',
                    columns: 3
            },
            {
                min: 1200,
                rowGutter: '30px',
                columnsGutter: '30px',
                columns: {{ section.settings.web_column }}
            }
        ],
        render(data,callback) {
          engine.registerFilter('money', val => formatMoney(val, oemcart_currency))

          engine.parseAndRender($("#omesaas-collection-product-temp").html(), {
                    products: data,
                    theme_config:themeConfig,
                    lang:lang,
                    collection_handle: "{{collection.handle }}",
                    data_from:"{{data_from}}"
                }).then(function (liquidHtml) {
                  const node = $(liquidHtml);
                  callback && callback.call(this,node)
          });
          
        }
    })

    {% unless section.settings.collection_id.id %}
        waterfall.RenderDefaultData({
          image: {alt: "", src: "{{ 'empty.png' | public_asset_abs_url }}"},
          inventory_policy: 1,
          inventory_quantity: 0,
          inventory_tracking: 0,
          title: "title",
          variant: {price: 18.8, compare_at_price: 188},
          variant_compare_at_price_max: 188,
          variant_compare_at_price_min: 188,
          variant_price_max: 18.8,
          variant_price_min: 18.8,
        },'{{ section.settings.button_text }}')
    {% endunless %}


    const collection_id = '{{ section.settings.collection_id.id | default : "" }}';


    let page = 1;
        let isAll = true;
        let maxRequestNumber = '{{ section.settings.count }}';
        let isScrollLoad = false;


        function getCollection() {
            waterfall.showLoad()
            if (maxRequestNumber) {
                maxRequestNumber--
            }
            moi.ajax({
                url:`/collection/{{ section.settings.collection_id.id }}/products`,
                type:"get",
                data: {
                  page: page,
                  pagesize: 10,
                },
                success: function(ret) {
                    if (!ret.code) {
                        isScrollLoad = false;
                        waterfall.hideLoad()
                        waterfall.addStorage(ret.data.list)
                        isAll = ret.data.paginate.pageTotal === page ? true : false;

                        //最大加载次数
                        if (!maxRequestNumber || isAll) {
                            waterfall.showMore("{{ section.settings.button_text }}", "/collections/{{collection.handle}}")
                        }
                      
                    }
                }
            })
        }

        function scrollBottom() {
            if (!isScrollLoad && !isAll && maxRequestNumber) {
                isScrollLoad = true;
                page++
                getCollection()
            }
        }
        if (collection_id) {
            getCollection();
        }
       

})();
</script>



{% schema %}
{
  "tag": "",
  "class": "block_collection_waterfall",
  "is_global": false,
  "name": {
    "zh_CN": "商品瀑布"
  },
  "max_blocks": "5",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "专辑"
      }
    },
    {
      "type": "card_collection",
      "label": {
        "zh_CN": "选择专辑"
      },
      "default": {
        "id": "",
        "title": ""
      },
      "id": "collection_id"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title",
      "default": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述"
      },
      "id": "detail",
      "default": "title"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_fill"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "pc每排数量"
      },
      "default": "3",
      "id": "web_column",
      "max": "5",
      "min": "2"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "移动端每排数量"
      },
      "default": "1",
      "id": "mobile_column",
      "max": "3",
      "min": "2"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "加载次数"
      },
      "default": "3",
      "id": "count",
      "max": "5",
      "min": "1"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案"
      },
      "id": "button_text"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "collection_id": {
        "id": "",
        "title": ""
      },
      "title": "Collection Waterfall",
      "detail": "",
      "web_column": "4",
      "mobile_column": "2",
      "is_fill": false,
      "is_mobile_name": true,
      "count": "3",
      "button_text": "View More"
    },
    "blocks": []
  }
}
{% endschema %}